import { Input, Image, Button, Popconfirm, Tag, Switch, Select } from "antd";
import { FieldTimeOutlined, EyeOutlined } from "@ant-design/icons";
import CommonPage from "@/components/page/CommonPage";
import CrudTable from "@/components/table/CrudTable";
import QueryBarItem from "@/components/query-bar/QueryBarItem";
import styled from "styled-components";
import { convertImgUrl } from "@/utils/MyFun";
import { loginTypeMap, loginTypeOptions } from "@/constant/data";
import { formatDate } from "@/utils/common/common";
import { useEffect, useRef } from "react";
import useCRUD from "@/hooks/useCRUD";
import { getUsers } from "@/api/user";
import useGetState from "@/hooks/useGetState";

const Styled = styled.div``;

const List = () => {
  const $table = useRef();
  const {
    modalVisible,
    setModalVisible,
    handleSave,
    modalForm,
    handleEdit,
    tableSelections,
    setTableSelections,
  } = useCRUD({
    name: "用户",
    refresh: () => $table.current.handleSearch(),
  });
  const [queryItems, setQueryItems, getQueryItems] = useGetState({});
  const columns = [
    {
      title: "头像",
      key: "avatar",
      dataIndex: "avatar",
      width: 50,
      align: "center",
      render: (text, record, index) => {
        return (
          <Image
            style={{ height: "50px", borderRadius: "3px" }}
            src={convertImgUrl(record.avatar)}
            fallback="http://dummyimage.com/400x400"
          />
        );
      },
    },
    {
      title: "昵称",
      key: "nickname",
      width: 60,
      align: "center",
      ellipsis: true,
      render(text, record) {
        return <span>{record.nickname}</span>;
      },
    },
    {
      title: "登录方式",
      key: "login_type",
      width: 40,
      align: "center",
      render(text, record, index) {
        return (
          <Tag color={loginTypeMap[record.login_type].tag}>
            {loginTypeMap[record.login_type].name}
          </Tag>
        );
      },
    },
    {
      title: "用户角色",
      key: "name",
      width: 80,
      align: "center",
      render(text, record) {
        return <span>{record.name}</span>;
      },
    },
    {
      title: "登录 IP",
      key: "ip_address",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.ip_address || "未知"}</span>;
      },
    },
    {
      title: "IP 来源",
      key: "ip_source",
      dataIndex: "ip_source",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.ip_source || "未知"}</span>;
      },
    },
    {
      title: "创建时间",
      key: "created_at",
      align: "center",
      width: 60,
      render: (text, record, index) => {
        return (
          <Button
            type="link"
            icon={<FieldTimeOutlined />}
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.created_at)}
          </Button>
        );
      },
    },
    {
      title: "登录时间",
      key: "last_login_time",
      align: "center",
      width: 70,
      render(text, record, index) {
        return (
          <Button
            type="link"
            icon={<FieldTimeOutlined />}
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.last_login_time)}
          </Button>
        );
      },
    },
  ];
  function updateQueryItems(newQueryItems) {
    console.log("更新query", newQueryItems);
    setQueryItems(newQueryItems);
  }

  useEffect(() => {
    $table.current.handleSearch();
  }, []);

  return (
    <Styled>
      <CommonPage title="用户列表">
        <CrudTable
          ref={$table}
          getData={getUsers}
          columns={columns}
          queryItems={queryItems}
          updateQueryItems={updateQueryItems}
          getQueryItems={getQueryItems}
          hasRowSelection={false}
        >
          <div className="queryBar-slot flex label-ml-15" slot="queryBar">
            <QueryBarItem label="昵称" labelWidth={40}>
              <Input
                placeholder="请输入用户昵称"
                value={queryItems.nickname}
                onChange={(e) => {
                  setQueryItems({
                    ...queryItems,
                    nickname: e.target.value,
                  });
                }}
              />
            </QueryBarItem>
            <QueryBarItem label="登录方式" labelWidth={70} contentWidth={180}>
              <Select
                placeholder="请选择登录方式"
                options={loginTypeOptions}
                allowClear
                value={queryItems.login_type}
                onChange={(val) => {
                  setQueryItems({
                    ...queryItems,
                    login_type: val,
                  });
                }}
              />
            </QueryBarItem>
          </div>
        </CrudTable>
      </CommonPage>
    </Styled>
  );
};

export default List;
